<!--
 * @Author: Await
 * @Date: 2024-12-24 18:38:10
 * @LastEditors: Await
 * @LastEditTime: 2025-01-02 21:07:42
 * @Description: 请填写简介
-->
<script lang="ts" setup>
import {
  computed,
  h,
  nextTick,
  onBeforeUnmount,
  onMounted,
  ref,
  watch
} from 'vue';
import {
  NButton,
  NButtonGroup,
  NCard,
  NDropdown,
  NEmpty,
  NGrid,
  NGridItem,
  NIcon,
  NImage,
  NInput,
  NPagination,
  NPopover,
  NSelect,
  NSkeleton,
  NSpace,
  NSpin,
  NTag,
  NTooltip,
  useMessage
} from 'naive-ui';
import { useRouter } from 'vue-router';
import { MediaType } from '@/constants/media';
import { $t } from '@/locales';
import { mediaApi } from '@/service/api/media';
import { fetchImageData } from '@/service/api';
import MediaNfoInfo from '@/components/media/MediaNfoInfo.vue';

defineOptions({
  name: 'MoviePage'
});

// 工具函数
const message = useMessage();
const router = useRouter();

// 状态管理
const movieList = ref<Api.Media.MediaItem[]>([]);
const sortBy = ref(localStorage.getItem('movieSortBy') || 'nameAsc');
const searchText = ref('');
const loading = ref(false);
const cardLoading = ref<Set<string>>(new Set());
const imageLoadErrors = ref<Set<string>>(new Set());
const checkedKeys = ref<string[]>([]);
const posterUrls = ref<Record<string, string>>({});

// 分页配置
const pagination = ref({
  page: 1,
  pageSize: 24,
  itemCount: 0
});

// 布局配置
const layoutMode = ref<'grid' | 'list'>(
  (localStorage.getItem('movieLayoutMode') as 'grid' | 'list') || 'grid'
);
// 响应式布局配置
const responsive: 'self' | 'screen' | undefined = 'self';
// const responsive: Record<string, number> = {
//   xs: 2, // 超小屏幕显示2列
//   s: 3, // 小屏幕显示3列
//   m: 4, // 中等屏幕显示4列
//   l: 5, // 大屏幕显示5列
//   xl: 6, // 超大屏幕显示6列
//   '2xl': 8 // 2K及以上显示8列
// };

// 计算属性
const showBatchActions = computed(() => checkedKeys.value.length > 0);
const sortOptions = computed(() => [
  {
    label: $t('page.movie.sort.nameAsc'),
    value: 'nameAsc'
  },
  {
    label: $t('page.movie.sort.nameDesc'),
    value: 'nameDesc'
  },
  {
    label: $t('page.movie.sort.dateAsc'),
    value: 'dateAsc'
  },
  {
    label: $t('page.movie.sort.dateDesc'),
    value: 'dateDesc'
  }
]);

// 监听器
watch([layoutMode, sortBy], ([newLayoutMode, newSortBy]) => {
  localStorage.setItem('movieLayoutMode', newLayoutMode);
  localStorage.setItem('movieSortBy', newSortBy);
});

// 方法
async function fetchMovieList() {
  if (loading.value) return;

  try {
    loading.value = true;
    const { data } = await mediaApi.getMediaList({
      pageIndex: pagination.value.page,
      pageSize: pagination.value.pageSize,
      name: searchText.value,
      sortField: sortBy.value.includes('name') ? 'name' : 'lastWriteTime',
      sortOrder: sortBy.value.endsWith('Asc'),
      mediaType: MediaType.Movie
    });

    if (data?.result) {
      movieList.value = data.result;
      pagination.value.itemCount = data.total;
    }
  } catch (error) {
    console.error('获取电影列表失败:', error);
    message.error($t('page.movie.fetchError'));
  } finally {
    loading.value = false;
  }
}

function handleImageError(id: string) {
  imageLoadErrors.value.add(id);
}

async function handleCardClick(item: Api.Media.MediaItem) {
  try {
    cardLoading.value.add(item.id);
    await router.push(`/media/movie/detail/${item.id}`);
  } catch {
    message.error($t('page.movie.openError'));
  } finally {
    cardLoading.value.delete(item.id);
  }
}

function handleSortChange(value: string) {
  sortBy.value = value;
  pagination.value.page = 1;
  fetchMovieList();
}

function handleSearch() {
  pagination.value.page = 1;
  fetchMovieList();
}

function handlePageChange(page: number) {
  pagination.value.page = page;
  fetchMovieList();
}

function handlePageSizeChange(pageSize: number) {
  pagination.value.pageSize = pageSize;
  pagination.value.page = 1;
  fetchMovieList();
}

// 刷新处理函数
async function handleRefresh() {
  if (loading.value) return;
  pagination.value.page = 1;
  await fetchMovieList();
  message.success($t('common.refreshSuccess'));
}

// 初始化
fetchMovieList();

// 批量操作菜单
const batchActionOptions = computed(() => [
  {
    label: $t('common.batchRefresh'),
    key: 'batchRefresh',
    icon: renderIcon('icon-material-symbols:refresh')
  }
]);

async function handleBatchAction(key: string) {
  if (key === 'batchRefresh') {
    //
  }
}

// 渲染图标函数
function renderIcon(icon: string) {
  return () => h('div', { class: icon });
}

// 操作菜单选项
const actionOptions = computed(() => [
  {
    label: $t('common.openFolder'),
    key: 'openFolder',
    icon: renderIcon('icon-material-symbols:folder-open')
  },
  {
    label: $t('common.copyPath'),
    key: 'copyPath',
    icon: renderIcon('icon-material-symbols:content-copy')
  },
  {
    type: 'divider',
    key: 'd1'
  },
  {
    label: $t('common.refresh'),
    key: 'refresh',
    icon: renderIcon('icon-material-symbols:refresh')
  }
]);

// 处理操作菜单选择
async function handleActionSelect(item: Api.Media.MediaItem, key: string) {
  // eslint-disable-next-line no-warning-comments
  if (key === 'openFolder') {// TODO: 调用后端接口打开文件夹
    //
  } else if (key === 'copyPath') {
    await navigator.clipboard.writeText(item.path);
    message.success($t('common.copySuccess'));
    // eslint-disable-next-line no-warning-comments
  } else if (key === 'refresh') {// TODO: 刷新单个项目
    //
  }
}

async function loadPosterImage(id: string) {
  if (posterUrls.value[id]) return;
  const item = movieList.value.find((movie) => movie.id === id);
  if (!item) return;
  const newVar =
    layoutMode.value === 'grid' ? item?.landscapeAddress : item?.posterAddress;
  if (!newVar) return;
  try {
    const { data } = await fetchImageData(newVar);
    if (data) {
      const blob = new Blob([data], { type: 'image/jpeg' });
      posterUrls.value[id] = URL.createObjectURL(blob);
    }
  } catch (error) {
    console.error('加载图片失败:', error);
    handleImageError(id);
  }
}

// 创建一个 Map 来存储每个元素的观察状态
const observerMap = new Map<string, boolean>();

// 创建 Intersection Observer
const createObserver = () => {
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        const id = entry.target.getAttribute('data-id');
        if (id && entry.isIntersecting && !observerMap.get(id)) {
          observerMap.set(id, true);
          if (!imageLoadErrors.value.has(id) && !posterUrls.value[id]) {
            loadPosterImage(id);
          }
        }
      });
    },
    {
      root: null,
      rootMargin: '50px',
      threshold: 0.1
    }
  );

  return observer;
};

const observer = ref<IntersectionObserver | null>(null);

// 监听元素
const observeElements = () => {
  if (!observer.value) return;

  // 获取所有需要观察的元素
  const elements = document.querySelectorAll('.movie-poster-container');
  elements.forEach((el) => {
    observer.value?.observe(el);
  });
};

onMounted(() => {
  observer.value = createObserver();
  observeElements();
});

onBeforeUnmount(() => {
  observer.value?.disconnect();
  observer.value = null;

  // 清理 URL 对象和观察状态
  Object.values(posterUrls.value).forEach((url) => {
    URL.revokeObjectURL(url);
  });
  observerMap.clear();
  imageLoadErrors.value.clear();
});

// 在数据更新后重新观察元素
watch(movieList, () => {
  nextTick(() => {
    observeElements();
  });
});

// 修改 layoutMode 的监听器
watch(layoutMode, () => {
  // 清除所有已缓存的图片 URL
  Object.values(posterUrls.value).forEach((url) => {
    URL.revokeObjectURL(url);
  });
  posterUrls.value = {};
  imageLoadErrors.value.clear(); // 清除错误记录，允许重新加载

  // 重新加载当前列表中的图片
  movieList.value.forEach((item) => {
    if (item.id) {
      // 移除错误检查，因为我们要重新尝试加载
      loadPosterImage(item.id);
    }
  });
});
</script>

<template>
  <div class="h-full flex flex-col">
    <!-- 头部筛选区 -->
    <div
      class="sticky top-0 z-10 shrink-0 border-b border-[#eee] bg-white p-16px shadow-sm transition-all dark:border-[#333] dark:bg-[#18181c]"
    >
      <div class="flex items-center justify-between">
        <div class="text-16px text-primary font-bold">
          {{ $t('page.movie.title') }}
        </div>
        <NButtonGroup size="small">
          <NTooltip>
            <template #trigger>
              <NButton :loading="loading" @click="handleRefresh">
                <template #icon>
                  <NIcon>
                    <IconMaterialSymbolsRefresh />
                  </NIcon>
                </template>
              </NButton>
            </template>
            {{ $t('common.refresh') }}
          </NTooltip>
          <NTooltip>
            <template #trigger>
              <NButton
                @click="layoutMode = layoutMode === 'grid' ? 'list' : 'grid'"
              >
                <template #icon>
                  <NIcon>
                    <IconMaterialSymbolsGridView
                      v-if="layoutMode === 'list'"
                    />
                    <IconMaterialSymbolsList v-else />
                  </NIcon>
                </template>
              </NButton>
            </template>
            {{ $t('common.switchLayout') }}
          </NTooltip>
        </NButtonGroup>
      </div>
      <NSpace :size="12" align="center" class="mt-12px">
        <NInput
          v-model:value="searchText"
          :placeholder="$t('page.movie.searchPlaceholder')"
          @keyup.enter="handleSearch"
        >
          <template #suffix>
            <div class="cursor-pointer" @click="handleSearch">
              <IconMaterialSymbolsSearch />
            </div>
          </template>
        </NInput>
        <NSelect
          v-model:value="sortBy"
          :options="sortOptions"
          size="small"
          style="min-width: 140px"
          @update:value="handleSortChange"
        />
      </NSpace>
      <div v-if="showBatchActions" class="mt-12px flex items-center gap-12px">
        <span class="text-14px">{{
            $t('common.selected', { count: checkedKeys.length })
          }}</span>
        <NDropdown :options="batchActionOptions" @select="handleBatchAction">
          <NButton size="small">
            {{ $t('common.batchOperation') }}
          </NButton>
        </NDropdown>
      </div>
    </div>

    <!-- 内容区 -->
    <div class="custom-scrollbar flex-1 overflow-auto">
      <NSpin
        :delay="300"
        :show="loading"
        description="加载中..."
        stroke="var(--n-primary-color)"
      >
        <div class="p-16px">
          <NEmpty
            v-if="!loading && !movieList.length"
            :description="$t('page.movie.noData')"
          />
          <template v-else>
            <!-- 网格布局 -->
            <template v-if="layoutMode === 'grid'">
              <NGrid :cols="4" :responsive="responsive" :x-gap="16" :y-gap="16">
                <NGridItem v-for="item in movieList" :key="item.id">
                  <div :data-id="item.id" class="movie-poster-container">
                    <NCard
                      :loading="cardLoading.has(item.id)"
                      class="movie-card"
                      hoverable
                      @click="handleCardClick(item)"
                    >
                      <template #cover>
                        <NSkeleton v-if="loading" :height="300" />
                        <NImage
                          v-else
                          :preview-disabled="true"
                          :src="posterUrls[item.id]"
                          class="h-300px w-full"
                          fallback-src="/favicon.svg"
                          object-fit="cover"
                          @error="handleImageError(item.id)"
                        />
                      </template>
                      <NSpace :size="4" vertical>
                        <div class="flex items-start justify-between">
                          <div
                            class="line-clamp-2 text-14px text-[var(--n-text-color-base)] font-medium"
                          >
                            {{ item.name }}
                            <NTag v-if="item.isDisc" size="small" type="info"
                            >蓝光
                            </NTag>
                          </div>
                          <NDropdown
                            :options="actionOptions"
                            trigger="hover"
                            @select="handleActionSelect(item, $event)"
                          >
                            <NButton circle quaternary size="small" @click.stop>
                              <template #icon>
                                <NIcon>
                                  <IconMaterialSymbolsMoreVert />
                                </NIcon>
                              </template>
                            </NButton>
                          </NDropdown>
                        </div>
                        <MediaNfoInfo :nfo="item.nfo" mode="grid" />
                        <div
                          class="flex items-center justify-between text-12px text-[var(--n-text-color-3)]"
                        >
                          <div class="flex items-center gap-4px">
                            <IconMaterialSymbolsHardDriveOutline
                              class="text-14px"
                            />
                            {{ item.size }}GB
                          </div>
                          <div class="flex items-center gap-4px">
                            <IconMaterialSymbolsCalendarTodayOutline
                              class="text-14px"
                            />
                            {{
                              new Date(item.lastWriteTime).toLocaleDateString()
                            }}
                          </div>
                        </div>
                        <div class="text-12px text-[var(--n-text-color-3)]">
                          <NTooltip trigger="hover">
                            <template #trigger>
                              <span class="block truncate">{{
                                  item.path
                                }}</span>
                            </template>
                            {{ item.path }}
                          </NTooltip>
                        </div>
                        <div class="meta-group">
                          <template v-if=" item.codec || item.subtitle">
                            <span v-if="item.codec" class="meta-item">
                              <i class="i-material-symbols:code" />
                              {{ item.codec }}
                            </span>
                            <NPopover
                              v-if="item.subtitle"
                              :raw="true"
                              :show-arrow="false"
                              :style="{
                                padding: '0',
                                border: 'none',
                                maxWidth: '300px',
                                background: 'var(--n-card-color)',
                              }"
                              placement="top"
                              trigger="hover"
                            >
                              <template #trigger>
                                <span class="meta-item">
                                  <i class="i-material-symbols:subtitles" />
                                  {{
                                    item.subtitle?.length
                                      ? $t('page.tv.episodeDetail.subtitle') +
                                      ` (${item.subtitle.length})`
                                      : $t('page.tv.episodeDetail.noSubtitle')
                                  }}
                                </span>
                              </template>
                              <div v-if="item.subtitle?.length" class="subtitle-list">
                                <div
                                  v-for="(sub, index) in item.subtitle"
                                  :key="index"
                                  class="subtitle-item"
                                >
                                  <i class="i-material-symbols:subtitles-outline" />
                                  <span class="subtitle-name">{{ sub }}</span>
                                </div>
                              </div>
                            </NPopover>
                          </template>
                        </div>
                      </NSpace>
                      <template v-if="layoutMode !== 'grid'" #footer>
                        <div class="text-12px text-[var(--n-text-color-3)]">
                          {{ new Date(item.lastWriteTime).toLocaleString() }}
                        </div>
                      </template>
                    </NCard>
                  </div>
                </NGridItem>
              </NGrid>
            </template>

            <!-- 列表布局 -->
            <template v-else>
              <div class="list-container">
                <div
                  v-for="item in movieList"
                  :key="item.id"
                  class="list-layout"
                >
                  <div :data-id="item.id" class="movie-poster-container">
                    <NCard
                      :loading="cardLoading.has(item.id)"
                      class="movie-card"
                      hoverable
                      @click="handleCardClick(item)"
                    >
                      <template #cover>
                        <NSkeleton v-if="loading" :height="300" />
                        <NImage
                          v-else
                          :preview-disabled="true"
                          :src="posterUrls[item.id]"
                          class="h-300px w-full"
                          fallback-src="/favicon.svg"
                          object-fit="cover"
                          @error="handleImageError(item.id)"
                        />
                      </template>
                      <NSpace :size="4" vertical>
                        <div class="flex items-start justify-between">
                          <div
                            class="text-14px font-medium text-[var(--n-text-color-base)] line-clamp-2"
                          >
                            <!--                            class="line-clamp-2 text-14px text-[var(&#45;&#45;n-text-color-base)] font-medium"-->
                            {{ item.name }}
                            <NTag v-if="item.isDisc" size="small" type="info"
                            >蓝光
                            </NTag>
                          </div>
                          <NDropdown
                            :options="actionOptions"
                            trigger="hover"
                            @select="handleActionSelect(item, $event)"
                          >
                            <NButton circle quaternary size="small" @click.stop>
                              <template #icon>
                                <NIcon>
                                  <IconMaterialSymbolsMoreVert />
                                </NIcon>
                              </template>
                            </NButton>
                          </NDropdown>
                        </div>
                        <MediaNfoInfo :nfo="item.nfo" mode="list" />
                        <div
                          class="flex items-center justify-between text-12px text-[var(--n-text-color-3)]"
                        >
                          <div class="flex items-center gap-4px">
                            <IconMaterialSymbolsHardDriveOutline />
                              class="text-14px"
                            />
                            {{ item.size }}GB
                          </div>
                          <div class="flex items-center gap-4px">
                            <IconMaterialSymbolsCalendarTodayOutline
                              class="text-14px"
                            />
                            {{
                              new Date(item.lastWriteTime).toLocaleDateString()
                            }}
                          </div>
                        </div>
                        <div class="text-12px text-[var(--n-text-color-3)]">
                          <NTooltip trigger="hover">
                            <template #trigger>
                              <span class="block truncate">{{
                                  item.path
                                }}</span>
                            </template>
                            {{ item.path }}
                          </NTooltip>
                        </div>
                        <div class="meta-group">
                          <template v-if=" item.codec || item.subtitle">
                            <span v-if="item.codec" class="meta-item">
                              <i class="i-material-symbols:code" />
                              {{ item.codec }}
                            </span>
                            <NPopover
                              v-if="item.subtitle"
                              :raw="true"
                              :show-arrow="false"
                              :style="{
                                padding: '0',
                                border: 'none',
                                maxWidth: '300px',
                                background: 'var(--n-card-color)',
                              }"
                              placement="top"
                              trigger="hover"
                            >
                              <template #trigger>
                                <span class="meta-item">
                                  <i class="i-material-symbols:subtitles" />
                                  {{
                                    item.subtitle?.length
                                      ? $t('page.tv.episodeDetail.subtitle') +
                                      ` (${item.subtitle.length})`
                                      : $t('page.tv.episodeDetail.noSubtitle')
                                  }}
                                </span>
                              </template>
                              <div v-if="item.subtitle?.length" class="subtitle-list">
                                <div
                                  v-for="(sub, index) in item.subtitle"
                                  :key="index"
                                  class="subtitle-item"
                                >
                                  <i class="i-material-symbols:subtitles-outline" />
                                  <span class="subtitle-name">{{ sub }}</span>
                                </div>
                              </div>
                            </NPopover>
                          </template>
                        </div>
                      </NSpace>
                      <template v-if="layoutMode === 'list'" #footer>
                        <div class="text-12px text-[var(--n-text-color-3)]">
                          {{ new Date(item.lastWriteTime).toLocaleString() }}
                        </div>
                      </template>
                    </NCard>
                  </div>
                </div>
              </div>
            </template>
          </template>
        </div>
      </NSpin>
    </div>

    <!-- 底部分页区 -->
    <div class="shrink-0 border-t border-[#eee] p-16px dark:border-[#333]">
      <div class="flex justify-center">
        <NPagination
          v-model:page="pagination.page"
          v-model:page-size="pagination.pageSize"
          :item-count="pagination.itemCount"
          :page-sizes="[24, 48, 96]"
          :prefix="() => $t('common.pagination.total')"
          show-quick-jumper
          show-size-picker
          @update:page="handlePageChange"
          @update:page-size="handlePageSizeChange"
        />
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 定义组件级别的CSS变量 */
.movie-card {
  /* 基础变量 */
  --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
  --border-radius: 8px;
  --font-size-small: 12px;
  --font-size-normal: 14px;
  --font-size-large: 16px;
  --card-transition: all 0.3s var(--transition-timing);
  --card-hover-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* 卡片基础样式 */
.movie-card {
  transition: var(--card-transition);
  border: 1px solid transparent;
  border-radius: 12px;
  overflow: hidden;
  width: 100%;
  height: 100%;

  &:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-hover-shadow);
    border-color: var(--n-primary-color);

    :deep(.n-card-cover img) {
      transform: scale(1.08);
    }
  }

  :deep(.n-card-loading) {
    min-height: 200px;
  }
}

/* 元数据组样式 */
.meta-group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-small);
  color: var(--n-text-color-3);

  i {
    font-size: 16px;
  }
}

/* 字幕列表样式 */
.subtitle-list {
  max-height: 200px;
  overflow-y: auto;
  font-size: var(--font-size-small);
  padding: 8px;
  border-radius: var(--border-radius);

  &::-webkit-scrollbar {
    width: 4px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: var(--n-scrollbar-color);
    border-radius: 2px;

    &:hover {
      background-color: var(--n-scrollbar-color-hover);
    }
  }
}

.subtitle-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  transition: background-color 0.2s var(--transition-timing);

  &:hover {
    background-color: var(--n-hover-color);
  }

  &:not(:last-child) {
    border-bottom: 1px solid var(--n-divider-color);
  }

  i {
    color: var(--n-text-color-3);
    font-size: 16px;
  }

  .subtitle-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--n-text-color);
  }
}

/* 列表布局样式 */
.list-layout {
  --list-gap: 16px;
  --card-height: 200px;
  --cover-width: 140px;

  display: flex;
  flex-direction: column;
  gap: var(--list-gap);
}

.list-layout .movie-card {
  height: var(--card-height);
  display: flex;
  flex-direction: row;
  padding: 0;
}

.list-layout .movie-card :deep(.n-card-cover) {
  width: var(--cover-width);
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
}

.list-layout .movie-card :deep(.n-card-cover img) {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

/* 网格布局样式 */
.n-grid .movie-card :deep(.n-card-cover) {
  height: 360px;
  border-radius: 8px;
  overflow: hidden;
}

.n-grid .movie-card :deep(.n-card-cover img) {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.movie-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-hover-shadow);
  border-color: var(--n-primary-color);
}

.movie-card:hover :deep(.n-card-cover img) {
  transform: scale(1.08);
}

/* 通用样式优化 */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 过渡动画优化 */
.fade-list-enter-active,
.fade-list-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-list-enter-from,
.fade-list-leave-to {
  opacity: 0;
  transform: translateY(20px);
}

.fade-list-move {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 添加滚动条样式 */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: var(--n-scrollbar-color) transparent;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--n-scrollbar-color);
  border-radius: 3px;
}

/* 优化按钮样式 */
.n-button:not(.n-button--quaternary) {
  min-width: 80px; /* 设置最小宽度使按钮更一致 */
}

/* 优化下拉菜单触发区域 */
.n-dropdown-trigger {
  padding: 4px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.n-dropdown-trigger:hover {
  background-color: rgba(0, 0, 0, 0.06);
}

/* 暗色模式适配 */
:deep(.dark) {
  --card-hover-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);

  .n-dropdown-trigger:hover {
    background-color: rgba(255, 255, 255, 0.06);
  }

  .movie-card:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  }
}

.movie-poster-container {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 0.3s ease;

  &:hover {
    z-index: 1;
  }
}

.list-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 优化列表布局的响应式表现 */
.list-layout {
  width: 100%;
  min-height: 200px;
}

/* 优化加载状态的显示 */
.movie-card:deep(.n-card-loading) {
  min-height: 200px;
}

.subtitle-list {
  max-height: 200px;
  overflow-y: auto;
  font-size: var(--font-size-small);
  padding: 8px;
  border-radius: var(--border-radius);
}

.subtitle-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  transition: background-color 0.2s var(--transition-timing);

  &:hover {
    background-color: var(--n-hover-color);
  }

  &:not(:last-child) {
    border-bottom: 1px solid var(--n-divider-color);
  }
}

.subtitle-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--n-text-color);
}

.subtitle-item i {
  color: var(--n-text-color-3);
  font-size: 16px;
}

.subtitle-list::-webkit-scrollbar {
  width: 4px;
}

.subtitle-list::-webkit-scrollbar-track {
  background: transparent;
}

.subtitle-list::-webkit-scrollbar-thumb {
  background-color: var(--n-scrollbar-color);
  border-radius: 2px;

  &:hover {
    background-color: var(--n-scrollbar-color-hover);
  }
}


.meta-group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-small);
  color: var(--n-text-color-3);

  i {
    font-size: 16px;
  }
}

/* 定义组件级别的CSS变量 */
.movie-card {
  /* 基础变量 */
  --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
  --border-radius: 8px;
  --font-size-small: 12px;
  --font-size-normal: 14px;
  --font-size-large: 16px;
}
</style>
